<template>
  <view class="deepcover">
    <view class="padding-sm padding-bottom bg-white">
      <search></search>
    </view>

    <u-gap height="2"></u-gap>
    <view v-if="auth">
      <view class="export" @click="acShow = true">
        <image class="margin-right-xs" src="../../static/icons/export1.png" mode="widthFix"></image>
        名片导入
      </view>
      <view class="export" @click="edit = !edit">
        <image class="margin-right-xs" src="../../static/icons/export2.png" mode="widthFix"></image>
        名片移除
      </view>
    </view>

    <u-gap height="16"></u-gap>
    <view class="list" v-if="!edit">
      <card :avatar="i.vcard.portrait" :name="i.vcard.name" :job="i.vcard.position" :company="i.vcard.company" v-for="i in list"
        :key="i.id" @click="$goto('/pages/cards/detail?type=customer&id=' + i.vcard.id)"></card>
    </view>

    <view class="remove full bg-white padding-left" v-if="edit">
      <u-checkbox v-for="i in list" :key="i.id" v-model="i.checked" style="width: 100%;">
        <card :avatar="i.vcard.portrait" :name="i.vcard.name" :job="i.vcard.position" :company="i.vcard.company"></card>
      </u-checkbox>
    </view>

    <!-- 名片导入 -->
    <u-action-sheet :list="acList" v-model="acShow" @click="acClick"></u-action-sheet>
    
    <!-- 名片移除 -->
    <u-gap height="120"></u-gap>
    <view class="fixed edit" v-if="edit">
    	<my-btn width="280" height="72" size="28" radius @click="edit = false">取消操作</my-btn>
    	<my-btn width="280" height="72" size="28" radius @click="remove">移除名片</my-btn>
    </view>
  </view>
</template>

<script>
  import search from '@/pages/cards/components/search.vue'
  import card from '@/pages/cards/components/card.vue'
  export default {
    components: {
      search,
      card
    },
    data() {
      return {
        id: '',
        auth: false,
        list: [],
        edit: false,
        acList: [{
            text: '名片夹导入',
            url: '/pages/import/cards'
          },
          {
            text: '手工录入',
            url: '/pages/cards/edit'
          }
        ],
        acShow: false
      };
    },
    watch: {
      auth(val) {
        if (!this.auth) {
          this.edit = false
        }
      },
      edit(val) {
        if (!this.auth) {
          this.edit = false
        }
      }
    },
    onLoad(opt) {
      this.id = opt.id
    },
    onShow() {
      this.getList()
    },
    onPullDownRefresh() {
      this.getList()
    },
    methods: {
      acClick(e) {
        let url = this.acList[e].url
        if (e == 0) {
          url += `?id=${this.id}`
        } else {
          url = ''
        }
        this.$goto(url)
      },
      async getList() {
        let res = await this.$u.get('/company/vcard/list?id=' + this.id)
        let {
          msg,
          result
        } = res.data
        
        let { auth, list } = result
        this.auth = auth
        this.list = list.map(item => {
          return {
            ...item,
            checked: false
          }
        })
        uni.stopPullDownRefresh()
      },
      async remove() {
        let vcard = this.list.filter(item => item.checked).map(item => {
          return item.vcard.id
        })
        if (!vcard.length) {
          return
        }
        let params = {
          id: this.id,
          vcard_id: vcard
        }
        let res = await this.$u.post('/company/vcard/remove', params)
        let { msg, result } = res.data
        this.$msg(msg)
        this.edit = false
        this.getList()
      }
    }
  }
</script>

<style lang="scss">
  .export {
    width: 100%;
    height: 96rpx;
    display: flex;
    align-items: center;
    padding: 0 36rpx;
    background: #fff;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #111111;

    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
  
  .fixed {
    width: 750rpx;
    height: 120rpx;
    background: #FFFFFF;
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    letter-spacing: 2rpx;
    align-items: center;
    box-shadow: 0rpx 0rpx 7rpx 1rpx rgba(0, 0, 0, 0.26);
  }
</style>
